import { useEffect, useState } from "react";
import AnyMask from "./anymask";
import styles from "./RightMask.module.css";
//逻辑已处理完毕
export default function RightMask() {
  // 不需要类型定义，直接使用数组初始值
  const [masks, setMasks] = useState([]);
  
  useEffect(() => {
    fetch("http://localhost:5000/api/mask/all")
      .then((res) => res.json())
      .then((masks) => {
        setMasks(masks);
        console.log(masks);
      })
      .catch((err) => {
        console.log(err);
      });
  }, []);
  
  // 不需要类型约束循环变量
  const masklist = masks.map((mask) => (
    <AnyMask
      key={mask.id}
      maskid={mask.id}
      maskName={mask.name}
    />
  ));
  
  return (
    <div className={styles.rightMask}>
      <div className={styles.maskTop}>请选择你需要的健身指导</div>
      <div className={styles.maskSelect}>
        <ul>
          {masklist}
        </ul>
      </div>
    </div>
  );
}
